<template>
    <div class="pages">
         <div class="cart"   v-for="(item,index) in list" :key="index">
<!--           <van-checkbox :value="item.checked" ></van-checkbox>-->
            <span class="indexBox" :class="{'active':item.checked}" @click="onChange($event,index)">{{index+1}}</span>
             <indexMb
               v-if="item.type==2"
               :data="item"
               :widthItem="widthItem"
               ref="indexMb"
               @goCartDetail="goCartDetailFun"
             ></indexMb>
             <indexMb1
               v-if="item.type==1"
               :data="item"
               :widthItem="widthItem"
               ref="indexMb1"
               @goCartDetail="goCartDetailFun"
             ></indexMb1>


         </div>
      <van-dialog id="van-dialog" />
       <div class="addCart" @click="goAdd" v-if="list.length<5">
         <van-icon name="add" color="#0066FF" size="70rpx" style="margin-top:15rpx;" />
         <p >添加名片</p>
       </div>
      <button    class="weui-btn weui-btn_primary" @click="changeCart">切换名片</button>
      <button    class="weui-btn weui-btn_primary" style="background-color:#FF3333 " @click="deleteCart">删除</button>
    </div>
</template>

<script>
  import indexMb from "../../components/indexMb.vue"
  import indexMb1 from "../../components/indexMb1.vue"
  import Dialog from '../../../static/vant-weapp/dist/dialog/dialog';
   import {getOptions} from "../../utils/api.js"
    export default {
        name: "index",
      data(){
          return {
              list:[],
              widthItem:"90%",
              index:"",
              cartId:""
          }
      },
      components:{
        indexMb,
        indexMb1
      },
      onShow(){
          this.getList();
          wx.setNavigationBarTitle({
              title: '我的名片'
          })
          this.cartId=  wx.getStorageSync('cartId')
      },
      onPullDownRefresh(){
        this.getList();
        // wx.stopPullDownRefresh();
        // wx.hideLoading()

      },
      methods:{
          goAdd(){


              wx.setStorageSync('isEdit', 0)
              wx.navigateTo({ url: '/pages/createCard/main' })


          },
          deleteCart(){
              let that=this;
              if( this.cartId==this.list[this.index].id){
                  Dialog.alert({
                      title: '提示',
                      message: '此名片正在使用不可删除!'
                  }).then(() => {
                      // on close
                  });
              }else{
                  Dialog.confirm({
                      title: '提示',
                      message: '确认删除?'
                  }).then(() => {
                      that.$http.request({
                          method: 'get',
                          url: `/api/card/delete`,
                          body: {
                              cardId:that.list[that.index].id
                          }
                      }).then((data) => {
                          if (data.code == 200) {
                              wx.showToast({
                                  title: `删除成功`,
                                  icon: 'success',
                                  duration: 2000,
                                  success:()=>{
                                      that.getList();
                                  }
                              })


                          } else {
                              wx.showToast({
                                  title: `${data.message}`,
                                  icon: 'none',
                                  duration: 2000
                              })
                          }
                      }).catch((err) => {

                      })
                  }).catch(() => {
                      // on cancel
                  });

              }

          },
          changeCart(){
            let userId =  wx.getStorageSync('userId')
              this.$http.request({
                  method: 'get',
                  url: `/api/card/bindingUser`,
                  body: {
                      cardId:this.list[this.index].id,
                    userId:userId,
                  }
              }).then((data) => {
                  if (data.code == 200) {
                      let obj={};
                      wx.showToast({
                          title: `切换成功`,
                          icon: 'success',
                          duration: 2000,
                          success:()=>{
                              obj.logo='http://'+this.list[this.index].logo;
                              obj.name=this.list[this.index].name;
                              obj.company=this.list[this.index].company;
                              wx.setStorageSync('shareData', JSON.stringify(obj))
                              wx.setStorageSync('cartId', this.list[this.index].id)
                              wx.setStorageSync('cartId1', this.list[this.index].id)
                              wx.reLaunch({ url: '/pages/cardDetail/main' })
                          }
                      })


                  } else {
                      wx.showToast({
                          title: `${data.message}`,
                          icon: 'none',
                          duration: 2000
                      })
                  }
              }).catch((err) => {

              })
          },
            getList(){
              let userId =  wx.getStorageSync('userId')
                this.$http.request({
                    method: 'get',
                    url: `/api/card/list`,
                    body: {
                      userId:userId
                    }
                }).then((data) => {
                    if (data.code == 200) {
                      wx.stopPullDownRefresh();

                        this.list = data.data;

                        this.list.forEach((a,i)=>{
                            a.checked=false;
                            if(a.flag4){
                              a.bgId=a.flag4.split('*')[1];
                              a.flag4=a.flag4.split('*')[0];
                              if(a.bgId){
                                   let objBg=getOptions().filter((item)=>{
                                     return item.id==a.bgId;
                                   })[0];

                                       if(objBg){
                                         a.bgUrl=objBg.url;
                                          console.log(a.bgUrl)
                                       }
                              }else{
                                a.bgUrl="https://img.xbdzmp.com/20200428111831d75990ae5f0b.jpg";
                              }
                            }else{
                              a.bgUrl="https://img.xbdzmp.com/20200428111831d75990ae5f0b.jpg";
                            }
                            // if(a.flag4){
                            //   console.log(a)
                            //  a.bgId=a.flag4.split('*')[1];
                            //   a.flag4=a.flag4.split('*')[0];
                            //   if(bgId){
                            //     let objBg=getOptions().filter((item)=>{
                            //       return item.id==a.bgId;
                            //     })[0];
                            //     if(objBg){
                            //       a.bgUrl=objBg.url;

                            //     }
                            //   }else{
                            //      a.bgUrl="https://img.xbdzmp.com/20200112010646ebd5b6556012.jpg";
                            //   }

                            // }
                            if(this.cartId==a.id){
                                this.index=i;
                                a.checked=true;
                            }




                        })
                        console.log(this.list)
                        //console.log(this.list)
                    } else {
                        wx.showToast({
                            title: `${data.message}`,
                            icon: 'none',
                            duration: 2000
                        })
                    }
                }).catch((err) => {

                })
            },
          onChange(e,index){
              this.index=index;
           let checked=e.mp.detail;
              this.list.forEach((a,i)=>{
                  a.checked=false;
              })
           this.list[index].checked=true;
           this.$forceUpdate();
          // console.log(e,index)
          },
            goCartDetailFun(){

            }
      }
    }
</script>

<style scoped>
   .pages{
     width: 100%;
     height: auto;
     background-color: #fff;
     box-sizing: border-box;
     padding:10rpx 20rpx;
   }
  .cart{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40rpx;
  }
  .addCart{
    width: 100%;
    height: 150rpx;
    background: #fff;
    color: #0066FF;
    text-align: center;
    border:1px solid #0066FF;
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    vertical-align: center;
  }
  .cart .indexBox{
    display: inline-block;
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    text-align: center;
    line-height:50rpx;
    box-sizing: border-box;
    border:1px solid rgb(61,176,243);
    font-family: "KaiTi";
  }
   .cart .indexBox.active{
     background: rgb(61,176,243);
     color: #fff;

   }
</style>
